<script setup lang="ts">
import { LoginForm } from "./components";
import { onMounted, reactive, ref, unref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useUserStore } from "@/store/modules/user";
import type { LoginInfoType } from "@/types/user";
import { useDarks } from "@/hooks/useDark";

import { initStarrySky } from "@/utils/canvas";
const canvasDom = ref<HTMLCanvasElement | null>(null);
onMounted(() => {
  if (isDark) {
    initStarrySky(canvasDom.value);
  }
});

const { isDark } = useDarks();
const useStore = useUserStore();
const redirect = ref<any>("/"); // 登录携带的跳转连接
const route = useRoute();
const $router = useRouter();
// 登录成功回传token
const handleLogin = (data: LoginInfoType) => {
  useStore.setToken(data.token);
  useStore.setUser(data);
  $router.push(redirect.value);
};

watch(
  route,
  (routes) => {
    redirect.value = (routes.query && routes.query.redirect) || "/";
  },
  { deep: true } // 深度监听
);
</script>
<template>
  <div class="login-main" :class="isDark ? 'dark' : ''">
    <div class="login-body">
      <div class="login-body-left">
        <LoginForm @handleLogin="handleLogin" />
      </div>
    </div>
    <canvas class="canvasDom" ref="canvasDom" />
  </div>
</template>

<style lang="scss" scoped>
.login-main {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--#{$namespace}-bg-color-page);
  background-size: 100% auto;
  background-repeat: repeat;
  background-position: center;
  overflow: hidden;

  &.dark {
    // background-image: url("/status/images/loginbj.jpg");
    .login-body {
      background-color: rgba($color: #222, $alpha: 0.7);
      color: #fff;
    }
    ::v-deep {
      .#{$namespace}-input__wrapper {
        --#{$namespace}-input-bg-color: transparent;
        color: #fff;
      }
      .#{$namespace}-form-item__label {
        color: #fff;
      }
      .#{$namespace}-input__inner {
        color: #fff;
      }
    }
  }
}
.canvasDom {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.login-body {
  width: 500px;
  position: relative;
  z-index: 9;
  border-radius: 12px;
  display: flex;
  background-color: #fff;

  &-left {
    flex: 1;
  }
  &-right {
    padding: 30px;
    width: 300px;
    border-left: 1px solid var(--el-card-border-color);
    text-align: center;
    h3 {
      font-weight: 300;
      font-size: 22px;
      margin-bottom: 10px;
    }
    p {
      margin-bottom: 20px;
    }
  }
}
</style>
